
<template>
  <div class="main-layout">
    <div class="container box-width clearfix">
      <img src="http://qiniu.prod.fita-club.com/web/login-cover.png" class="float-lg-left float-md-left float-sm-left float-xl-left" style="width: 640px; margin-top: 60px; margin-bottom: 60px;margin-left: 40px;">
      <form class="login-form ft-login float-lg-left float-md-left float-sm-left float-xl-left"
        v-if="phase === 'login' && !setPassword"
        style="margin-top: 120px;"
        @submit.prevent="userLogin"
      >
        <div v-if="logined" style="height: 211px;">
          <h1 style="font-size: 30px; color: #886223; padding-top: 0px; text-align: center;">您已成功登录</h1>
          <h1 style="font-size: 18px; padding-top: 40px; color: #666; line-height: 1.5;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请返回首页直接搜索车辆信息并下单
          </h1>
          <p style="text-align: right; margin-top: 10px;">
            <a href="javascript:void(0);" class="backlogin" v-on:click="logoutFun">退出登录</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="/" class="backlogin">返回首页</a>
          </p>
        </div>
        <div v-else>
          <div v-if="!hasPassword && !setPassword">
            <div class="form-group">
              <input type="text" name="mobile" class="form-control" id="userMobile" placeholder="手机号:" v-model.trim="selectedMobile">
            </div>
            <div class="form-group code-item">
              <input type="text" class="form-control code" name="code" id="code" placeholder="请输入验证码" v-model.trim="verificationCode">
              <a href="javascript:void(0);" class="btn get-code" id="getcode" ref="getcode" @click="getCode">{{codeContent}}</a>
            </div>
            <div class="clearfix">
              <a href="javascript:void(0);" class="float-right" style="padding-right: 0;margin-top: -5px; color: #a1781e;" @click="toggleLogin">密码登录</a>
            </div>
            <div class="form-group" style="margin-top: 40px;">
              <button type="submit"
                class="btn ft-btn"
                style="width: 100%;margin-bottom: 10px; font-weight: bold;"
              >登录</button>
              <div class="clearfix agent-layout">
                <a href="javascript:void(0);" class="btn ft-btn" style="width: 100%;" v-on:click="switchForm" data-phase="company">公司注册</a>
                <!-- <a href="javascript:void(0);" class="btn ft-btn" v-on:click="switchForm" data-phase="personal">个人注册</a> -->
              </div>
            </div>
          </div>
          <div v-if="hasPassword && !setPassword">
            <div class="form-group">
              <input type="text" name="userName" class="form-control" id="userName" placeholder="请输入: Email\手机号" v-model.trim="userName">
            </div>
            <div class="form-group code-item">
              <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码" v-model.trim="verificationPassword">
            </div>
            <div class="clearfix">
              <a href="javascript:void(0);" class="float-right" style="padding-right: 0;margin-top: -5px; color: #a1781e;" @click="toggleLogin">验证码登录</a>
            </div>
            <div class="form-group" style="margin-top: 40px;">
              <button type="submit"
                class="btn ft-btn"
                style="width: 100%;margin-bottom: 10px; font-weight: bold;"
              >登录</button>
              <div class="clearfix agent-layout">
                <a href="javascript:void(0);" class="btn ft-btn" style="width: 100%;" v-on:click="switchForm" data-phase="company">公司注册</a>
                <!-- <a href="javascript:void(0);" class="btn ft-btn" v-on:click="switchForm" data-phase="personal">个人注册</a> -->
              </div>
            </div>
            <b-tooltip :disabled.sync="disabled" ref="tooltip" target="userName">请输入正确的用户名</b-tooltip>
            <b-tooltip :disabled.sync="disabled" ref="tooltip" target="password">请输入至少6位且包含数字及字母的密码</b-tooltip>
          </div>
        </div>
      </form>
      <b-tooltip :disabled.sync="disabled" ref="tooltip" target="userMobile">请输入正确的手机号码</b-tooltip>
      <!-- <b-tooltip :disabled.sync="disabled" ref="tooltip" target="userName">请输入正确的用户名</b-tooltip> -->
      <b-tooltip :disabled.sync="disabled" ref="tooltip" target="code">请输入验证码</b-tooltip>
      <!-- <b-tooltip :disabled.sync="disabled" ref="tooltip" target="different-password">请重复您的新密码</b-tooltip>
      <b-tooltip :disabled.sync="disabled" ref="tooltip" target="repeat-password">请重复您的新密码</b-tooltip>
      <b-tooltip :disabled.sync="disabled" ref="tooltip" target="password">请输入至少6位且包含数字及字母的密码</b-tooltip> -->
      <b-modal id="msg-modal" centered style="text-center" hide-header hide-footer><div class="text-center" style="line-height: 50px; color: #a1781e;">{{msg}}</div></b-modal>
      <form class="login-form agent-form float-lg-left float-md-left float-sm-left float-xl-left" v-if="phase === 'personal'"
        novalidate="true"
        @submit.prevent="bindAgentSubmit"
      >
        <div v-if="showPersonalApply" style="height: 402px;">
          <h1 style="font-size: 30px; color: #886223; padding-top: 60px; text-align: center;">个人申请成功</h1>
          <h1 style="font-size: 18px; padding-top: 40px; color: #666; line-height: 1.5;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您的注册申请已成功提交，我公司会尽快跟您取得联系。
            审核通过后，您即可登录账号进行租车~
          </h1>
          <p style="text-align: right; margin-top: 10px;">
            <a href="/" class="backlogin">返回首页</a>
          </p>
        </div>
        <div v-else>
          <div class="form-group">
            <label class="label">*关联分区：</label>
            <div class="select-box">
              <v-select
                id=""
                :clearable="false"
                :options="districts"
                v-model.trim="personalForm.districtId"
                :reduce="name => name.code"
                label="name"
              ></v-select>
            </div>
          </div>
          <div class="form-group">
            <label class="label">*姓名：</label>
            <input type="text" :state="true" name="name" class="form-control text-right" v-model.trim="personalForm.agentName" id="" placeholder="">
          </div>
          <div class="form-group code-item">
            <label class="label">*手机号：</label>
            <input type="text" name="mobile" class="form-control text-right code" v-model.trim="personalForm.agentMobile" id="" placeholder="">
          </div>
          <div class="form-group">
            <label class="label">*Email：</label>
            <input type="email" name="email" class="form-control text-right" id="" v-model.trim="personalForm.agentEmail" placeholder="">
          </div>
          <div class="form-group">
            <label class="label">客服热线</label>
            <a href="tel:+86-21-63758388" class="tel text-right">+86-21-63758388</a>
          </div>
          <div class="tips">
            <p>*请挑选离您所在地区最近的分区，分区仅 用于我公司内部维护客户所用</p>
            <p>*申请递交后，我公司会尽快跟您取得联系</p>
            <p>*香港手机请使用+852开头注册</p>
          </div>
          <button type="submit" class="btn ft-btn" style="margin-top: 10px;width: 100%;font-weight: bold;">立即注册</button>
          <a href="javascript:void(0);" class="float-lg-right float-md-right float-sm-right float-xl-right backlogin" v-on:click="switchForm" data-phase="login">返回登录</a>
        </div>
      </form>
      <form class="login-form agent-form float-lg-left float-md-left float-sm-left float-xl-left"
        style="margin-top: 25px !important;"
        v-if="phase === 'company'"
        @submit.prevent="bindAgentSubmit"
      >
        <div v-if="showAgentApply" style="height: 402px;">
          <h1 style="font-size: 30px; color: #886223; padding-top: 60px; text-align: center;">公司申请成功</h1>
          <h1 style="font-size: 18px; padding-top: 40px; color: #666; line-height: 1.5;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您的注册申请已成功提交，我公司会尽快跟您取得联系。
            审核通过后，您即可登录账号进行租车~
          </h1>
          <p style="text-align: right; margin-top: 10px;">
            <a href="/" class="backlogin">返回首页</a>
          </p>
        </div>
        <div v-else>
          <input type="hidden"  name="type" value="COMPANY">
          <div class="form-group">
            <label class="label">*公司名称：</label>
            <input type="text" name="companyName" v-model="personalForm.companyName" class="form-control text-right" id="" placeholder="">
          </div>
          <div class="form-group">
            <label class="label">*关联分区：</label>
            <v-select id="" :clearable="false" :options="districts" v-model.trim="personalForm.districtId" :reduce="name => name.code" label="name" ></v-select>
          </div>
          <div class="form-group">
            <label class="label">*操作人姓名：</label>
            <input type="text" :state="true" name="name" class="form-control text-right" v-model.trim="personalForm.agentName" id="" placeholder="">
          </div>
          <div class="form-group code-item">
            <label class="label">*手机号：</label>
            <input type="text" name="mobile" class="form-control text-right code" v-model.trim="personalForm.agentMobile" id="" placeholder="">
          </div>
          <div class="form-group">
            <label class="label">*Email：</label>
            <input type="email" name="email" class="form-control text-right" id="" v-model.trim="personalForm.agentEmail" placeholder="">
          </div>
          <div class="form-group">
            <label class="label">客服热线</label>
            <a href="tel:+86-21-63758388" class="tel text-right">+86-21-63758388</a>
          </div>
          <div class="tips">
            <p>*请挑选离您所在地区最近的分区，分区仅 用于我公司内部维护客户所用</p>
            <p>*申请递交后，我公司会尽快跟您取得联系</p>
            <p>*香港手机请使用+852开头注册</p>
          </div>
          <button type="submit" class="btn ft-btn agent-btn" style="margin-top: 10px;width: 100%;font-weight: bold;">立即注册</button>
          <a href="javascript:void(0);" class="float-lg-right float-md-right float-sm-right float-xl-right backlogin" v-on:click="switchForm" data-phase="login">返回登录</a>
        </div>
      </form>
      <form class="login-form ft-login float-lg-left float-md-left float-sm-left float-xl-left"
        style="margin-top: 100px !important; display: block;"
        @submit.prevent="bindSetPassword"
        v-if="setPassword"
      >
        <div>
          <h1 style="font-size: 30px; color: #886223; padding-top: 0px; margin-bottom: 30px; text-align: center;">设置登录密码</h1>
          <div class="form-group">
            <input type="password" name="password" class="form-control" id="repeat-password" placeholder="请设置您的登录密码" v-model.trim="setPasswordVal">
          </div>
          <div class="form-group code-item">
            <input type="password" class="form-control" name="new-password" id="different-password" placeholder="请重复您的新密码" v-model.trim="verificationPassword">
          </div>
          <div class="form-group" style="margin-top: 40px; margin-bottom: 0;">
            <button type="submit"
              class="btn ft-btn"
              style="width: 100%;margin-bottom: 10px; font-weight: bold;"
            >设置密码</button>
          </div>
          <div class="tips">
            <p style="font-size: 13px; color: #a1781e;">设置密码后，您可使用您的手机号或邮箱作为用户名登录。</p>
          </div>
        </div>
        <b-tooltip :disabled.sync="disabled" ref="tooltip" target="repeat-password">请输入至少6位且包含数字及字母的密码</b-tooltip>
        <b-tooltip :disabled.sync="disabled" ref="tooltip" target="different-password">请重复您的新密码</b-tooltip>
      </form>
    </div>
  </div>
</template>
<style type="text/css">
  .agent-form .form-group input,
  .agent-form .form-group select {
    margin-top: 1px;
    height: 32px;
  }

  input:-internal-autofill-selected {
    color: #a1781e !important;
  }

</style>
<script src="./login.js">
